<template>
    <div>
        <div v-if="cardListStore.cardList.length">
            <van-swipe-cell v-for="product in (cardListStore.cardList as Card[])" :key="product.cartid">
                <div class="card">
                    <van-checkbox v-model="product.flag" @click="select(product.cartid, product.flag)">
                    </van-checkbox>
                    <van-card :thumb="product.img1" :price="product.originprice + '.00'" :title="product.proname">
                        <template #footer>
                            <van-stepper v-model="product.num" input-width="40px" button-size="24px" theme="round"
                                @change="onChange(product)" />
                        </template>
                    </van-card>
                </div>
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button" @click="remove(product.cartid)" />
                </template>
            </van-swipe-cell>
        </div>
        <van-empty description="空空如也" v-else />

    </div>
</template>
<script lang='ts' setup>
import { changeNum, removeProduct, card, changeFlag } from '@/service/api';
import { showConfirmDialog } from 'vant';
import { useCardListStore } from '@/stores/cardStore';
const cardListStore = useCardListStore();
async function onChange(product: { num: number, cartid: string; }) {
    await changeNum(product.cartid, product.num);
    cardListStore.setFlag();
}
function select(cartid: string, flag: boolean) {
    changeFlag(cartid, flag);
    cardListStore.setFlag()
}

type Card = {
    cartid: string
    discount: number
    flag: boolean
    img1: string
    num: number
    originprice: number
    proid: string
    proname: string
}

function remove(cartid: string) {
    showConfirmDialog({
        title: '确认操作',
        message:
            '即将删除该商品，确定删除么？',
    })
        .then(async () => {
            await removeProduct(cartid)
            cardListStore.cardList = (await card()).data.data as never;
        })
        .catch(() => { });
}


</script>
<style lang='less' scoped>
.van-swipe-cell {
    .card {
        display: flex;
        background-color: rgb(247, 248, 250);
        margin: 5px 0;

        .van-checkbox {
            display: flex;
            height: 40px;
            margin: auto;
            text-align: center;
            padding: 0 10px;
        }

        .van-card {
            box-sizing: border-box;
            padding: 10px;
            flex-grow: 1;
        }
    }


    .delete-button {
        height: 100%;
    }
}
</style>